<template>
  <div class="sj-form">
    <stepBar length=40></stepBar>
    <div class="form-main">
      <ul class="select-last" v-if="productTypeThis === 1">
        <li v-for="(item, index) in childLists" :key="index">
          <div class="input-box flex-box" :class="{inputBoxLast : index === childLists.length-1}">
            <div>
              <p><span><img v-bind:src="item.imgName" alt=""></span>{{item.listName}}</p>
              <input type="checkbox" :disabled="item.disable" v-model="item.checked" :checked="item.checked">
            </div>
          </div>
        </li>
      </ul>
      <ul class="select-last" v-if="productTypeThis === 2">
        <li v-for="(lists, index) in adultLists" :key="index">
          <div class="input-box flex-box" :class="{inputBoxLast : index === adultLists.length-1}">
            <div>
              <p><span><img v-bind:src="lists.imgName" alt=""></span>{{lists.listName}}</p>
              <input type="checkbox" :disabled="lists.disable" v-model="lists.checked" :checked="lists.checked">
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="fixed-form-foot">
      <div class="form-foot">
        <div class="form-foot-main flex-box">
          <!-- <h2>￥3200元</h2> -->
          <!-- <router-link to="/sjformb"><button @click="jcListsSubmit" class="next-page">下一步</button></router-link> -->
          <button @click="jcListsSubmit" class="next-page">下一步</button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import stepBar from "@/components/StepBar.vue";
import iconQjy01 from "@/assets/img/icon-qjy-01.png";
import iconQjy02 from "@/assets/img/icon-qjy-02.png";
// import iconQjy03 from "@/assets/img/icon-qjy-03.png";
// import iconQjy04 from "@/assets/img/icon-qjy-04.png";
import iconQjy05 from "@/assets/img/icon-qjy-05.png";
// import iconQjy06 from "@/assets/img/icon-qjy-06.png";
// import iconQjy07 from "@/assets/img/icon-qjy-07.png";
// import iconQjy08 from "@/assets/img/icon-qjy-08.png";
import iconQjy08C from "@/assets/img/icon-qjy-08-child.png";
import iconQjy08A from "@/assets/img/icon-qjy-08-adu.png";
import iconQjy09 from "@/assets/img/icon-qjy-09.png";
import iconQjy10 from "@/assets/img/icon-qjy-10.png";

const STORAGE_KEY = "formaMsg";
export default {
  data() {
    return {
      productTypeThis: "",
      childLists: [
        {
          imgName: iconQjy10,
          listName: "儿童常见遗传疾病",
          disable: true,
          checked: true
        },
        {
          imgName: iconQjy08C,
          listName: "儿童个体化用药",
          disable: true,
          checked: true
        },
        {
          imgName: iconQjy05,
          listName: "个体特征",
          disable: true,
          checked: true
        },
        {
          imgName: iconQjy02,
          listName: "基因ID",
          disable: true,
          checked: true
        },
        {
          imgName: iconQjy01,
          listName: "祖源",
          disable: true,
          checked: true
        }
      ],
      adultLists: [
        {
          imgName: iconQjy10,
          listName: "成人常见遗传疾病",
          disable: true,
          checked: true
        },
        {
          imgName: iconQjy08A,
          listName: "成人个体化用药",
          disable: true,
          checked: true
        },
        {
          imgName: iconQjy09,
          listName: "遗传性肿瘤",
          disable: true,
          checked: true
        },
        {
          imgName: iconQjy01,
          listName: "祖源",
          disable: true,
          checked: true
        },
        {
          imgName: iconQjy05,
          listName: "个体特征",
          disable: true,
          checked: true
        }
      ],
      jcListsOL: "",
      selectedJcLists: "",
      storageLists: this.$localStorage.fetch(STORAGE_KEY)
    };
  },
  components: {
    stepBar
  },
  watch: {
    storageLists: {
      handler: function(storageLists) {
        this.$localStorage.save(STORAGE_KEY, storageLists);
      },
      deep: true
    }
  },
  computed: {},
  methods: {
    arrFilter(arr) {
      let res = arr.filter(function(item) {
        return item.checked === true;
      });
      this.selectedJcLists = res;
    },
    jcListsSubmit() {
      // this.arrFilter(this.jcLists);
      // this.storageLists = this.jcListsOL;
      // // this.storageLists = { name: "44", isfinish: false };
      // // console.log(this.selectedJcLists);
      // setTimeout(() => {
      //   console.log(this.$localStorage.fetch(STORAGE_KEY));
      // }, 0);
      // console.log(this.$localStorage.fetch(STORAGE_KEY));
      this.$router.push("/sjformb");
    }
  },
  mounted() {
    // this.jcListsOL = window.localStorage.formaMsg
    //   ? JSON.parse(window.localStorage.formaMsg)
    //   : this.jcListsOL;
    // if (window.localStorage.formaMsg) {
    //   this.jcListsOL = JSON.parse(window.localStorage.formaMsg);
    // } else {}
    this.productTypeThis = window.ProductType;
    // this.$axios
    //   .get(
    //     this.$API.api +
    //       "/report/?i=3&c=entry&m=nifty&do=mobile&d=WGSAppointment&f=getProductInfo"
    //   )
    //   .then(res => {
    //     this.jcListsOL = res.data;
    //     // console.log(this.jcListsOL);
    //   })
    //   .catch(err => {
    //     console.log(err);
    //   });
  }
};
</script>
<style lang="scss" scoped>
.sj-form {
  width: 100%;
  min-height: 100vh;
  padding-bottom: r(70);
  box-sizing: border-box;
  .form-main {
    ul {
      li {
        p {
          margin: 0;
          height: r(24);
          margin-top: r(4);
          line-height: r(24);
          span {
            float: left;
            img {
              width: r(24);
              margin-right: r(12);
            }
          }
        }
        input[type="checkbox"] {
          width: 24px;
        }
      }
      .inputBoxLast {
        border-bottom: none;
      }
    }
  }
  .fixed-form-foot {
    position: fixed;
    width: 100%;
    background: #fff;
    height: r(70);
    left: 0;
    bottom: 0;
    .form-foot-main {
      justify-content: space-between;
      h2 {
        font-size: r(18);
        color: #66b9fe;
      }
      button {
        width: 100%;
      }
    }
  }
}
</style>
